<template>
  <div class="cascade-wrap">
    <el-row>
      <el-col :span="8">
        <div class="first-select">
          <el-select
            placeholder="省"
            v-model="selectData.provinceCode"
            @change="provinceChangeHandler"
          >
            <el-option
              v-for="item in provinceList"
              :key="item.addressCode"
              :label="item.addressName"
              :value="item.addressCode"
            >
            </el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="second-select">
          <el-select
            placeholder="市"
            v-model="selectData.cityCode"
            @change="cityChangeHandler"
          >
            <el-option
              v-for="item in cityList"
              :key="item.addressCode"
              :label="item.addressName"
              :value="item.addressCode"
            >
            </el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="third-select">
          <el-select
            placeholder="区"
            v-model="selectData.areaCode"
            @change="areaChangeHandler"
          >
            <el-option
              v-for="item in areaList"
              :key="item.addressCode"
              :label="item.addressName"
              :value="item.addressCode"
            >
            </el-option>
          </el-select>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { queryAddressListService } from '@api/supplier/components'
export default {
  props: {
  },
  data () {
    return {
      addressLevel: '', // 一到四级地址，分别对应 101 102 103 104
      provinceList: [], // 一级地址所有数据，省，直辖市
      cityList: [], // 二级地址所有数据， 市
      areaList: [], // 三级地址所有数据， 区，县
      selectData: {
        provinceCode: '', // 一级地址，省，直辖市 CODE
        provinceName: '',
        cityCode: '', // 二级地址， 市 CODE
        cityName: '',
        areaCode: '', // 三 级地址 ， 街道，乡镇 CODE
        areaName: ''
      }
    };
  },
  computed: {},
  mounted () {
    this.queryAddressList('101', 0);
  },
  methods: {
    setSelectData (obj) {
      const { provinceCode, provinceName, cityCode, cityName, areaCode, areaName } = obj
      this.selectData = Object.assign({}, this.selectData, {
        provinceCode,
        provinceName,
        cityCode,
        cityName,
        areaCode,
        areaName,
      });
      if (this.selectData.provinceCode) {
        this.queryAddressList('101', 0);
      }
      if (this.selectData.cityCode) {
        this.queryAddressList('102', Number(this.selectData.provinceCode));
      }
      if (this.selectData.areaCode) {
        this.queryAddressList('103', Number(this.selectData.cityCode));
      }
    },
    /* 级联地址查询 */
    queryAddressList (level, parentcode) {
      const data = {
        addressLevel: level,
        parentAddressCode: parentcode
      };
      queryAddressListService(data).then((res) => {
        if (res.result) {
          switch (level) {
            case '101':
              this.provinceList = res.result; // 获取一级地址数据
              break;
            case '102':
              this.cityList = res.result; // 获取二级地址数据
              break;
            case '103':
              this.areaList = res.result; // 获取三级地址数据
              break;
            default:
              break;
          }
        } else {
          this.$message.success(res.msg);
        }
      });
    },
    /* 选择一级地址时触发的事件函数 */
    provinceChangeHandler (parentcoded) {
      this.selectData.provinceCode = parentcoded;
      this.provinceList.map((item) => {
        if (item.addressCode == parentcoded) {
          this.selectData.provinceName = item.addressName;
        }
      });
      this.queryAddressList('102', parentcoded); // 查询二级地址数据
      this.cityList = [];
      this.areaList = [];
      this.selectData.cityCode = '';
      this.selectData.areaCode = '';
    },
    /* 选择二级地址时触发的事件函数 */
    cityChangeHandler (parentcoded) {
      this.selectData.cityCode = parentcoded;
      this.cityList.map((item) => {
        if (item.addressCode == parentcoded) {
          this.selectData.cityName = item.addressName;
        }
      });
      this.queryAddressList('103', parentcoded); // 查询三级地址数据
      this.areaList = [];
      this.selectData.areaCode = '';
      this.selectData.areaName = '';
    },
    /* 选择三级地址时触发的事件函数 */
    areaChangeHandler (parentcoded) {
      this.selectData.areaCode = parentcoded;
      this.areaList.map((item) => {
        if (item.addressCode == parentcoded) {
          this.selectData.areaName = item.addressName;
        }
      });
    },
  }
};
</script>
